<template>
    <keep-alive>
        <div class="tabar">
            <div class="bar" v-for="(item, index) in list" :key="index" @click="fun(index)">
                <div class="pic">
                    <img :src="change(index)" alt="">
                </div>
                <div class="text">{{ item.text }}</div>
            </div>
        </div>
    </keep-alive>
  
</template>

<script>
export default {
    data() {
        return {
            num: 0,
            list: [
                { pic: '../1.png', text: '首页', pics:'../1_1.png'},
                { pic: '../2.png', text: '分类', pics: '../2_1.png' },
                { pic: '../3.png', text: '必抢清单', pics: '../3_1.png' },
                { pic: '../4.png', text: '购物车', pics: '../4_1.png' },
                { pic: '../5.png', text: '我的易购', pics: '../5_1.png' },
            ]
        }
    },
    methods: {
        fun(index) {
            sessionStorage.setItem("nm", index);
            var nm = sessionStorage.getItem("nm");
            this.num = nm;
            switch (nm) {
                case '0':
                    this.$router.push("/home/hompage");
                    break;
                case '1':
                    this.$router.push("/home/classify");
                    break;
                case '2':
                    this.$router.push("/home/Manifest");
                    break;
                case '3':
                    this.$router.push("/home/ShoppingCart");
                    break;
                case '4':
                    var token=sessionStorage.getItem("token")
                    if (token) {
                        this.$router.push("/home/My");
                    } else {
                        this.$router.push("/Login");
                    }
                    break;
            }
        },
        change(s) {
            return s == this.num ? this.list[s].pics : this.list[s].pic;
        }
    },
    mounted() {
        let nm = sessionStorage.getItem("nm");
        this.num = nm;
    }
}
</script>

<style lang="scss" scoped>
.tabar{
    background-color: #ffffff;
    font-size: 0.12rem;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: space-around;
    position:fixed;
    bottom: 0;
    // margin-bottom: 0.06rem;
    .bar {
        width: 20%;
        .pic{
            img {
                    width: 0.24rem;
                    height: 0.24rem;
                }
        }
    }
}
</style>